<template>
	<view>
		<view id="app">
			<view v-show="videoFlag">
				<input type="file" ref="uploadFile" id="uploadFile" class="uploadFile" @change="getBigectURL($event)"/>
				<view class="uploadVideo">
					<view class="video" v-if="videoSrc">
					   <video id="video" style="width: 100%;height: 320rpx;" :src="videoSrc" @canplay="videoCanplay" @ended="videoEnded"
							   x-webkit-airplay="true"
							   playsinline="true"
							   x5-video-player-type="h5"
							   x5-video-orientation="portraint"
							   x5-video-player-fullscreen="true"
							   preload="auto"
							   controls="controls"/>

						<view v-if="isPlay==0" class="play">
							<image src="https://m.nocexpo.com/statics/js/modules/h5/img/img28.png"/>
						</view>
					</view>
					<view v-else class="addVideo">
						<view class="addVideo_top" style="margin: 30rpx 0;">
							添加视频<text style="color: red;">*</text> <text style="font-size: 24rpx;">（视频不得超过200M，只支持MP4格式）</text>
						</view>
						<image :src="imgUrl + '/statics/js/modules/applet/img/tianjiashipin.png'"
							 style="width:65%; height: 300rpx;border-radius: 12rpx 12rpx 12rpx 12rpx; vertical-align:middle; "
							 @click="clickVideo()"/>
						<view class="warning">注：视频不得超过200M</view>
					</view>
					<!-- 上传视频封面  -->
					<view class="newsImg" v-show="ifShowCover">
						<view class="addVideo_top" style="padding-left: 40rpx; margin: 10rpx 0; margin-bottom: 30rpx;">
							上传视频封面 <text style="font-size: 24rpx;">（图片比例1.5:1）</text>
						</view>
						<!-- <view style="font-size: 16px;margin-bottom: 50rpx;margin-left: 50rpx;display: flex;">小视频封面<view style="color: red;margin-left: 50rpx">(建议:封面图片长高比例1.5:1)</view></view> -->
						<view class="img-list">
							<input type="file" style="display: none" ref="uploadImg"
								   accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
								   multiple id="uploadImg" class="uploadImg" @change="uploadImg()"/>
							<image v-if="coverImg" :src="coverImg"  class="img-item" @click="delCoverImg()"/>
							<view v-else class="addImg-container" @click="clickUpload()">
								<image class="addImg" :src="imgUrl + '/statics/js/modules/applet/img/shipinfengmian.png'"/>
							</view>
						</view>
					</view>
					<view class="addVideo_top" style="padding: 40rpx; box-sizing: border-box;">
						<view style=" font-size: 30rpx; padding-bottom: 20rpx;">
							标题<text style="color: red;">*</text>
						</view>
						<textarea class="textar" name="" id=""  cols="30" maxlength="50" rows="3"   @focus="tabShowCover(false)" @blur="tabShowCover(true)" v-model="title" placeholder="给您的视频添加一个标题吧(30个字以内)"></textarea>
					</view>
					<!--  添加标签  -->
					<view class="addTag" @click="selTag" >
						<view class="addText">
							<view style="width: 50%;  margin-left: -10rpx; font-size: 28rpx;">添加标签<text style="color: red;">*</text></view>
							<view style="position: relative; left: 400rpx; width: 220rpx; color: #A1A0A0;">请添加</view>
								<image class="addIcon" src="https://m.nocexpo.com/statics/js/modules/h5/img/icon20.png"/>
						</view>
						<view class="tagList">
							<view class="tag-item" v-for="item in useTagList">
								<view class="tag-text">{{'#'+item.tagName}}</view>
							</view>
						</view>
					</view>
					<view class="upload-text" v-show="startUpload">
						<view class="percentage">{{percent}}</view>
						<view class="schedule">
							<view class="bg"></view>
							<view class="num" id="schedule"></view>
						</view>
						<view class="text">{{uploadState}}</view>
					</view>
					<view v-if="buttonSwitch == true" class="upload"  style="display: flex;">
						<button style="background-color: #F2F3F5; color: #A1A0A0;margin-right: 20rpx;" class="button" @click="submitVideo(0)">存草稿</button>
						<button style=" background: linear-gradient(to bottom, #54D6D2, #00AAA6 ); color: #fff; margin-left: 20rpx;" class="button" @click="submitVideo(1)" :disabled="isDisable">发布</button>
					</view>
					<view v-else class="upload">
						<button style="width:100%;" @click="updateVideo(1)" :disabled="isDisable">发布</button>
					</view>
				</view>
			</view>
			<!-- 标签详情页 -->
			<view v-show="tagFlag" style="background-color: white;">
				<view style="padding-top: 0.3rem;">
					<view class="sort" style="padding-bottom:0rpx;">
						<view class="sort-ul">
							<view style=" width: 100%;font-size: 30rpx;margin-bottom: 38rpx; color: #2E2D2D; font-weight: 500;">已选标签(可以多选)</view>
							<view  v-if="useTagList.length==0" style="height: 200rpx;">
							</view>
							<view v-else>
								<view class="sort-li" v-for="item in useTagList">
									<view class="sort-aa" href="javascript:void(0);">{{'#'+ item.tagName}}
										<p style="display: inline-block;" @click="delTag(item)">X</p>
									</view>
								</view>
							</view>
						</view>
						<view v-if="tagList.length>0" >
							<view style=" border-top: 1px solid #dbdbdb; width: 506rpx;max-height: 350rpx;overflow-y: auto;height: 300rpx;">
								<view v-for="(item,i) in tagList" :key="item.id" style="width: 490rpx; height: 70rpx; padding-left: 14rpx;
							            background-color: #f5f5f5;line-height: 70rpx;" @click="useTagItem(item)">
									{{ item.tagName }}
								</view>
							</view>
						</view>
					</view>
					<view style="background-color: #f5f5f5; height: 2rpx;width: 90%; margin: 0 auto;"></view>
					<view style="display: block; ">
						<!-- <view style="margin-left: 30rpx;font-size: 30rpx;margin-top: 20rpx;">注：标签可以多选</view> -->
						<view class="sort" style="padding-top: 48rpx;display: block;">
							<view style="width: 100%;font-size: 30rpx;color: #2E2D2D; font-weight: 500;">推荐标签</view>
							<view class="sort-ul">
								<view class="sort-li" v-for="item in recomTagList">
									<view class="sort-a" :class="{active : index === ''}" href="javascript:void(0);"
										@click="userTag(item)">{{item.tagName}}</view>
								</view>
							</view>
						</view>
						<view style="display: flex; margin-top: 30rpx;">
							<input placeholder="自定义标签，不超过十个汉字" class="tagInput" v-model="tagName">
							<view class="tagAdd" @click="addTag">添加</view>
						</view>
					</view>
					<view style="padding-top: 6rem;padding-bottom: 0.5rem;display: flex; justify-content: center;">
						<view class="back" @click="tagFlag = false;videoFlag = true;">返回</view>
						<view class="tagSave" @click="tagSelected">确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uploadApi from '@/api/uploadVideo.js';
import commonApi from '@/utils/commonMethod.js';
import indexApi from '@/utils/request/index.js';

export default {
	data() {
		return {
			page: 1, //1.直播-视频    2. 上传
			index: 2, //tabs切换
			loading: false,//正在加载
			noMore: false,//没有更多数据
			noData: false,//没有数据
			loadingVideo: false,//正在加载
			noMoreVideo: false,//没有更多数据
			noDataVideo: false,//没有数据
			isUpload: true,
			videoSrc: "",
			isPlay: 1, //0.未播放  1.播放中
			loading: null,
			coverImg:'',//视频封面
			videoList: [],//视频列表
			title: '',//视频标题
			ifShowCover:true,
			duration: 0,//视频时长
			liveUsers: [],//直播用户
			defaultZhiBoImg: '',
			searchVideo: {
				page: 1,
				limit: 10,
				search: '',
				lastpage: 0,
				totalPage: '',
			},//视频查询
			searchLive: {
				page: 1,
				limit: 10,
				search: '',
				lastpage: 0
			},//直播查询
			percent: '',//上传进度
			startUpload: false,//是否开始上传
			uploadState: '',//上传状态
			isDisable: false, //控制提交上架按钮
			useTagList: [],
			videoFlag: true,
			tagFlag: false,
			recomTagList: [],
			tagName: '',
			tagList: [],
			videoId:0,//更新所需
			buttonSwitch:true,
			ifLimit: '',
			load: false,
			imgUrl: indexApi.baseUrl,
		};
	},
	watch: {
		tagName(){
			if(this.tagName){
				commonApi.getTagList(this.tagName).then(res =>{
					this.tagList = res.data.page.list
				})
			}
		}
	},
	onLoad(options) {
		if(options.id != undefined){
			this.buttonSwitch = false;
			this.videoId = options.id;
			this.getVideoContent(this.videoId);
		}
		const self = this;
		
		
	},
	async mounted() {
		const self = this;
		//获取当前用户
		const currentPromise = await commonApi.currentUserAxios()
		this.currentUser = currentPromise.data.session_user_h5

		// const t = T.p("t");
		// if (t == 'f') {
		// 	//隐藏底部菜单
		// 	// document.getElementById("footer").style.display = "none";
		// 	//修改title
		// 	document.title = '上传小视频';
		// }
		//查询推荐标签
		this.getRecomTagList();
	},
	
	methods: {
		/**
		 * 触发上传封面图片按钮
		 */
		clickUpload() {
			
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album','camera'], //从相册选择
				success: function (res) {
					var that = this
					that.coverImg = res.tempFilePaths[0]
					
				}.bind(this)
			});
			//如果是微信浏览器,调用微信选择图片的方法
			// if(isWeiXin()){
			// 	console.log("微信浏览器调用微信选择图片方法")
			// 	wx.chooseImage({
			// 		count: 1, // 默认9
			// 		sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
			// 		sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			// 		success: function (res) {
			// 			let localId = res.localIds[0]
			// 			wx.getLocalImgData({
			// 				localId: localId, // 图片的localID
			// 				success: function (res) {
			// 					vm.load = true;
			// 					let localData = res.localData
			// 					if (localData.indexOf('data:image') != 0) {
			// 						//判断是否有这样的头部
			// 						localData = 'data:image/jpeg;base64,' +  localData
			// 					}
			// 					localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')

			// 					//生成canvas
			// 					let canvas = document.createElement('canvas');
			// 					if(canvas.getContext){
			// 						//获得渲染上下文和绘画功能
			// 						let ctx = canvas.getContext('2d');
			// 						var img = document.createElement('img');

			// 						img.onload = function(){
			// 							vm.tailorNewsImg(img,canvas,ctx)
			// 						}
			// 						img.onerror = function(res){
			// 							layer.open({
			// 								anim: '提示',
			// 								content: "图片加载错误"+JSON.stringify(res, ["message", "arguments", "type", "name"]),
			// 								btn: ['确定'],
			// 							});
			// 						}
			// 						img.src = localData;
			// 					}else{
			// 						layer.open({
			// 							anim: '提示', 
			// 							content: "您的浏览器不支持canvas",
			// 							btn: ['确定'],
			// 						});
			// 					}
			// 				},
			// 				fail:function(res){
			// 					layer.open({
			// 						anim: '提示',
			// 						content: res,
			// 						btn: ['确定'],
			// 					});
			// 				}
			// 			});
			// 		},
			// 		fail:function(res){
			// 			layer.open({
			// 				anim: '提示',
			// 				content: res,
			// 				btn: ['确定'],
			// 			});
			// 		}
			// 	});
			// }else{
			// 	this.$refs.uploadImg.dispatchEvent(new MouseEvent('click'));
			// }
		},
		//微信上传咨询图片
		// tailorNewsImg(img,canvas,ctx){
		// 	let _this = img
		// 	// 创建属性节点
		// 	var anw = document.createAttribute("width");
		// 	anw.nodeValue = _this.width;
		// 	var anh = document.createAttribute("height");
		// 	anh.nodeValue = _this.height;
		// 	canvas.setAttributeNode(anw);
		// 	canvas.setAttributeNode(anh);
		// 	ctx.drawImage(img,0,0,_this.width,_this.height);
		// 	let finalDataURL= canvas.toDataURL("image/jpeg", 1.0);
		// 	let finalFile = convertBase64UrlToBlob(finalDataURL)
		// 	let compressFile = {urlFile:finalFile,fileName:"newsImg.jpg"};
		// 	uploadCoverImg(compressFile)
		// },
		/**
		 * 获取选择的文件并上传
		 */
		uploadImg(el) {
			vm.load = true;
			let fileList = el.target.files
			Object.keys(fileList).forEach((value, index, array) => {
				//循环读取文件
				let fileReader = new FileReader();
				let img = new Image();
				fileReader.onload = (event) => {
					img.src = event.target.result
					img.onload = function () {
						// 旋转图片
						let newImage = rotateImage(img);
						newImage.name = fileList[value].name;
						imgCompress(newImage, {quality: 0.2}, uploadCoverImg)
					};
				}
				fileReader.readAsDataURL(fileList[value]);
			})
		},
		/**
		 * 上传视频
		 */
		uploadVideo() {
			const self = this
			const result = toRegistered(self.currentUser.type);
			if (!result) {
				return
			}
			this.$refs.uploadFile.dispatchEvent(new MouseEvent('click'));
		},
		//预览视频
		getBigectURL(event) {
			//判断视频格式
			if(event.target.files[0].type.indexOf("mp4") == -1 && event.target.files[0].type.indexOf("quicktime") == -1){
				layer.open({
					content: '抱歉,只支持上传mp4格式的视频！'
					, btn: '确定'
					, yes(index) {
						layer.close(index)
					}
				});
				return false;
			}
			if (event.target.files[0].size > 200 * 1024 * 1024) {
				event.target.value = '';
				layer.open({
					content: '抱歉,您的视频大小超过限制！'
					, btn: '确定'
					, yes(index) {
						layer.close(index)
						//清除input框内容
					}
				});
				return false
			}
			this.loading = layer.open({
				type: 2,
				content: '加载中'
			});

			try {
				let current = event.target.files[0];
				var fileReader = new FileReader();
				fileReader.readAsDataURL(current);
				var that = this;
				fileReader.onload = function (e) {
					that.videoSrc = e.currentTarget.result;
					//为了兼容IOS
					that.page = 2;
					that.isPlay = 0;
					layer.close(that.loading);
				}
			} catch (err) {
				alert(err);
			}
		},
		/**
		 * 提交上架
		 */
		async submitVideo(status) {
			const result = await commonApi.judgeNocuserUserInfo()
			if (!result) {
				return
			}
			// const self = this;
			// const file = self.$refs.uploadFile.files[0];
			if (!this.videoSrc) {
				
				uni.showModal({
					title: "",
					content: "请选择上传视频",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
				return;
			}

			if (!this.title) {
				
				uni.showModal({
					title: "",
					content: "请输入视频标题",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
				return;
			} else {
				if (this.title.length > 30) {
					
					uni.showModal({
						title: "",
						content: "标题不能超过30个字",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
					return;
				}
			}

			if(this.useTagList.length == 0){
				
				uni.showModal({
					title: "",
					content: "请选择标签",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
				return;
			}
			this.isDisable = true;

			//获取token, 上传时携带此参数，否则会被登录拦截掉
			let headers = {
				"token": uni.getStorageSync("authorize").token,
				cookie: uni.getStorageSync('cookie')
			};
			console.log(this);
			uni.uploadFile({
				url: 'https://m.nocexpo.com/sys/oss/uploadVideo',
				filePath: this.videoSrc,
				name: 'file',
				formData:{
					'title': this.title,
					'userId': this.currentUser.id,
					'duration': this.duration,
					'status': status,
					'coverImg': this.coverImg,
					'tagList' :JSON.stringify(this.useTagList),
				},
				header: headers,
				success:(res) =>{
					console.log("上传视频");
					console.log(res);
					// self.percent = '100%';
					// schedule.style.width = self.percent;
					// self.uploadState = '上传完成';
					uni.navigateTo({
						url: '/pages/product/vidoDetail/videoBuyers?index=' + (status == 0 ? 2 : 1)
					})
				}
			})
		},
		/**
		 * 视频播放就绪
		 */
		videoCanplay() {
			this.page = 2;
			this.isPlay = 0;

			layer.close(this.loading);
		},
		/**
		 * 播放视频
		 */
		playVideo() {
			document.getElementById("video").play();
			this.isPlay = 1;
		},
    //点击上传图片
		clickVideo() {
			uni.chooseVideo({
				sourceType: ['camera', 'album'],
				success: function (res) {
					var that = this
					console.log(res);
					that.videoSrc = res.tempFilePath;
				}.bind(this)
			});
			// if (!this.videoSrc) {
			// 	this.$refs.uploadFile.dispatchEvent(new MouseEvent('click'));
			// }
		},
		/**
		 * 视频播放结束
		 */
		videoEnded() {
			this.isPlay = 0;
		},
		selTag() {
			this.videoFlag = false;
			this.tagFlag = true;
		},
		addTag() {
			this.tagName = this.tagName.trim()
			if (!this.tagName) {
				
				uni.showModal({
					title: "",
					content: "请填写标签名！",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
				return;
			}
			if(!commonApi.testTagName(this.tagName)){
				uni.showModal({
					title: "",
					content: "标签含有字符或空格！",
					showCancel: false,
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				console.log("1");
				return;
			}
			uploadApi.saveTag(this.tagName).then(res => {
				
				uni.showModal({
					title: "",
					content: "添加成功",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
				let useItem = {
					id: res.data.nocTag.id,
					tagName: res.data.nocTag.tagName,
				}
				this.useTagList.push(useItem);
				this.tagName = '';
				
			})
		},
		tagSelected(){
			this.videoFlag = true;
			this.tagFlag = false;
		},
		getRecomTagList() {
			uploadApi.getRecomTagList().then(res => {
				this.recomTagList = res.data.page.list;
			})
		},
		userTag(tagInfo) {
			//校验是否已使用
			for (let i = 0; i < this.useTagList.length; i++) {
				if(this.useTagList[i].id == tagInfo.id){
					uni.showModal({
						title: "",
						content: "标签已选择",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return;
				}
			}
			let useItem = {
				id: tagInfo.id,
				tagName: tagInfo.tagName,
			}
			this.useTagList.push(useItem);
		},
		useTagItem(tagInfo){
			this.userTag(tagInfo);
			this.tagName = '';
			this.tagList = [];
		},
		delTag(tagInfo){
			uni.showModal({
				title: "",
				content: "确定删除？",
				showCancel:true,
				success: function (res) {
					if (res.confirm) {
						var that = this
						for (let i = 0; i < that.useTagList.length; i++) {
							if(that.useTagList[i].id == tagInfo.id){
								that.useTagList.splice(i,1);
								break;
							}
						}
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}.bind(this)
			});
		},
		//草稿视频编辑流程
		getVideoContent(id){
			uploadApi.getVideoContent(id).then(res => {
					this.videoSrc = res.data.videoContent.nocVideo.videoUrl;
					this.title = res.data.videoContent.nocVideo.videoTitle;
					this.coverImg = res.data.videoContent.nocVideo.coverImg;
					this.useTagList = res.data.videoContent.tagList;
			})
		},
		async updateVideo(status){
			const result = await commonApi.judgeNocuserUserInfo()
			if (!result) {
				return
			}
			if (!this.title) {
				uni.showModal({
					title: "",
					content: "请输入视频标题",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				return;
			} else {
				if (this.title.length > 30) {
					uni.showModal({
						title: "",
						content: "标题不能超过30个字",
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					
					return;
				}
			}

			if(this.useTagList.length == 0){
				
				uni.showModal({
					title: "",
					content: "请选择标签",
					showCancel:false,
					success: function (res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				
				return;
			}
			let content = "提交成功，待审核";
			uploadApi.updateVideo(this.videoId,status,this.title,this.useTagList,this.coverImg).then(res => {
				uni.navigateTo({
					url: '/pages/product/vidoDetail/videoBuyers?index=' + 1
				})
				//跳转
				// window.location.href = "/h5/video/videoBuyers.html?index=1";
			})
		},
		delCoverImg(){
			uni.showModal({
				title: "",
				content: "确认删除吗？",
				showCancel:false,
				success: function (res) {
					var that = this
					if (res.confirm) {
						that.coverImg = '';
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}.bind(this)
			});
		},

    // ifShowCover 切换显示隐藏
    tabShowCover(flag) {
      this.ifShowCover = flag
    },

		
	}
};
</script>

<style>
	
	.search .input a {
		width: 50%;
		float: left;
		height: 0.853333rem;
		line-height: 0.853333rem;
		border: 0;
		background: transparent;
		color: #bbb;
		font-size: 0.32rem;
	}

	.warning {
		color: red;
		margin-top: 5rpx;
		font-size: 22rpx;
		margin-bottom: 40rpx;
	}
	
	.video{
		height: 320rpx;
	}

	.addVideo {
		padding-left: 40rpx;
		/* height: 320rpx; */
		background-color: #fff;
		text-align: left;
		/* display: flex; */
		/* flex-direction: column; */
		/* justify-content: center; */
		/* align-items: center; */
	}
	.textar{
		background-color: #F7F7F7;
		/* border-radius: 20rpx; */
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		padding: 30rpx;
		/* width: 100%; */
		width: 660rpx;
		height: 144rpx;
		box-sizing: border-box;
/* 		height: 200rpx; */
		font-size: 28rpx;
		color: #A1A0A0 ;
	}
	.addVideo_top{
		width: 100%;
		text-align: left;
		font-size: 28rpx;
		margin-bottom: 20rpx;
	}
	.addVideo_top text{
		color: #999;
		
	}
	.newsImg {
		width: 100%;
		/* margin-top: 2rem; */
	}

	.img-list {
		padding-left: 40rpx;
		max-height: 600rpx;
		/* overflow: hidden; */
		/* display: flex;
		justify-content: center;
		align-items: center; */
		text-align: left;
	}

	.img-item {
		width: 50%;
		vertical-align: middle;
		margin: 0.115rem;
		text-align: left;
	}
	.addImg-container{
		height:300rpx;
		width: 70%;
		/* border: 2px solid #e2e2e2; */
	/* 	border-radius: 20rpx; */
	    border-radius: 12rpx 12rpx 12rpx 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.addImg {
		width: 100%;
		height: 100%;
		vertical-align: middle;
		margin: 10rpx;
	}

	.addTag {
		/*height: 1.2rem;*/
		width: 85%;
		margin: 0 auto;
		justify-content: space-between;
		background-color: white;
		/* border-top: 1px solid rgb(226,226,226); */
		border-bottom: 1px solid rgb(226,226,226);
		padding: 0 40rpx;
	}

	.addText {
		display: flex;
		font-size: 14px;
		/* font-family: PingFang; */
		justify-content: space-around;
		align-items:center;
		font-weight: 500;
		color: #333333;
		line-height: 80rpx;
		/* width: 20rpx; */
	}

	.tagList {
		/*display: flex;*/
		justify-content: center;
		align-items: center;
		margin-top: 0.1rem;
		margin-bottom: 0.1rem;
	}

	.tag-item {
		display: inline-block;
		justify-content: center;
		align-items: center;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		height: 30rpx;
		background-color: #E4F8F7;
		border-radius: 200rpx;
		padding: 10rpx 20rpx;
	}

	.tag-text {
		font-size: 25rpx;
		font-family: PingFang;
		font-weight: 500;
		color: #029E9D;
		padding-left: 10rpx;
		padding-right: 10rpx;
	}

	.addIcon {
		width: 30rpx;
		height: 30rpx;
		/* padding-top: 25rpx; */
		padding-left: 400rpx;
	}

	.sort {
		padding: 0 20rpx 0rpx 20rpx;
		background: #fff;
	}

	.sort h3 {
		font-size: 0.35rem;
		color: #333333;
		margin-bottom: 0.32rem;
		font: revert;
		font-weight: bold;
	}

	.sort .sort-ul {
		overflow: hidden;
		margin-top: 38rpx;
	}

	.sort .sort-li {
		float: left;
		margin-right: 20rpx;
		padding: 8rpx 1rpx;
		
	}
	.sort .sort-aa{
		background-color: #E4F8F7;
		color: #00AAA6;
		padding: 16rpx;
		border-radius: 200rpx;
		line-height: 1;
	}

	.sort .sort-a {
		display: inline-block;
		padding: 16rpx;
		/* height: 70rpx; */
		color: #A1A0A0;
		line-height: 1;
		border: 2rpx solid #DCDCDC;
		border-radius: 35rpx;
	}

	.tagInput {
		display: inline-block;
		border-radius: 35rpx;
		line-height: 70rpx;
		width: 524rpx;
		height: 68rpx;
		background-color: #f5f5f5;
		padding: 0 40rpx;
		margin-left: 20rpx;
		box-sizing: border-box;
	}
	
	.tagAdd {
		display: inline-block;
		margin-left: 20rpx;
		line-height: 68rpx;
		color: #FFFFFF;
		border-radius: 50rpx;
		text-align: center;
		width: 116rpx;
		height: 68rpx;
		background: linear-gradient(180deg, #54D6D2 0%, #00AAA6 100%);
		border-radius: 34rpx 34rpx 34rpx 34rpx;
	}
	
	.tagSave {
		margin: 0 auto;
		width: 	240rpx;
		height: 76rpx;
		background: linear-gradient(180deg, #54D6D2 0%, #00AAA6 100%);
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		font-weight: 600;
		font-size: 28rpx;
		line-height: 76rpx;
		color: #FFFFFF;
		text-align: center;
		position: relative;
		right: 40rpx;
		}
	.back{
		margin: 0 auto;
		width: 240rpx;
		height: 76rpx;
		background:#F2F3F5 ;
		border-radius: 38rpx 38rpx 38rpx 38rpx;
		font-weight: 600;
		font-size: 28rpx;
		line-height: 76rpx;
		color:#A1A0A0;
		text-align: center;
		position: relative
	}	
	.recommend {
		font-size: 35rpx;
		color: #333333;
		margin-bottom: 32rpx;
		font: revert;
		font-weight: bold;
		margin-top: 60rpx;
	}
	.newsImg {
		width: 100%;
		/* margin-top: 100rpx; */
	}
	.loader {
		position: relative;
		margin: 0 auto;
		width: 60px;
	}

	.loader:before {
		content: '';
		display: block;
		padding-top: 100%;
	}

	.circular {
		animation: rotate 2s linear infinite;
		height: 100%;
		transform-origin: center center;
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}

	.path {
		stroke-dasharray: 1, 200;
		stroke-dashoffset: 0;
		animation: dash 1.5s ease-in-out infinite,
		color 6s ease-in-out infinite;
		stroke-linecap: round;
	}
	
	.uploadVideo .input-title {
		width: 100%;
		border: 0;
		height: 80rpx;
		text-indent: 40rpx;
		/* justify-content: center; */
		font-size: 14px;
	}
	.uploadVideo .upload .button {
		width: 35%;
		font-size: 30rpx;
		border-radius: 50rpx;
		border: 0px;
		/* height: 90rpx; */
		background-color: #ffffff;
		padding: 5rpx 10rpx;
	}
	.uploadVideo .upload {
	    /* position: fixed;
	    bottom: 80rpx;
	    left: 3%; */
	    width: 100%;
		padding: 30rpx 0;
		box-sizing: border-box;
		margin: 20rpx 0;
		padding-bottom: 50rpx;
	}
	
	.uploadVideo .upload .button:last-child {
	    /* background-color: #019d9d; */
	    color: #ffffff;
	}
	.uploadFile {
	    position: fixed;
	    z-index: -1;
	    top: -3rem;
	    opacity: 0;
	}

	@keyframes rotate {
		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes dash {
		0% {
			stroke-dasharray: 1, 200;
			stroke-dashoffset: 0;
		}
		50% {
			stroke-dasharray: 89, 200;
			stroke-dashoffset: -35px;
		}
		100% {
			stroke-dasharray: 89, 200;
			stroke-dashoffset: -124px;
		}
	}

	@keyframes color {
		100%,
		0% {
			stroke: #45494a;
		}
		40% {
			stroke: #45494a;
		}
		66% {
			stroke: #45494a;
		}
		80%,
		90% {
			stroke: #45494a;
		}
	}

	body {
		background-color: #eee;
	}

	.showbox {
		width: 700px;
		height: 200px;
		position: fixed;
		left: 50%;
		top: 50%;
		z-index: 9999;
		/*设定这个div的margin-top的负值为自身的高度的一半,margin-left的值也是自身的宽度的一半的负值.*/
		/*宽为400,那么margin-top为-200px*/
		/*高为200那么margin-left为-100px;*/
		margin: -100px 0 0 -350px;
	}
	
</style>